<template>
  <Card>
    <Form :model="detail" :label-width="150" ref="detail" :rules="ruleValidate">
      <h3 class="form-tip">
        新增轮播图
      </h3>
      <Row>
        <FormItem label="排序值：" prop="sort">
          <InputNumber style="width: 250px;" :max="100" :min="1" v-model="detail.sort"></InputNumber>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="标题：" prop="title">
          <Input style="width: 250px;" v-model="detail.title"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="跳转链接：" prop="linkUrl">
          <Input style="width: 250px;" v-model="detail.linkUrl"/>
          <p>
            外部链接请加
            <span data-clipboard-action="copy" class="cobyOrderSn1" data-clipboard-text="http://" @click="copyLink('.cobyOrderSn1')">http://</span>
            或
            <span data-clipboard-action="copy" class="cobyOrderSn2" data-clipboard-text="https://" @click="copyLink('.cobyOrderSn2')">https://</span>
          </p>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="轮播图图片：" prop="picture" >
          <img v-if="detail.imgUrl" style="height:200px;width:300px" :src="detail.imgUrl" />
          <qiniu-upload v-bind:imgUrl.sync='detail.imgUrl'  :rate1="0.333" :rate2="3" :buttonText="add?'上传轮播图':'更改轮播图'"/>
        </FormItem>
      </Row>
      <Row>
        <FormItem label="状态：" prop="status">
          <RadioGroup v-model="detail.status">
            <Radio :label="1">展示</Radio>
            <Radio :label="2">下架</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
      <FormItem>
        <Button type="primary" :loading="saveLoading" @click="save('detail')">{{ add ? '新增':'保存'}}
        </Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
  import { getSliderDetail, editSlider } from '@/api/slider'
  import qiniuUpload from "_c/upload/qiniuUpload.vue"

  export default {
    components: {
      qiniuUpload
    },
    name: 'poster-detail',
    data () {
      return {
        detail: {
          sort: 1,
          title: '',
          posterSrc: ''
        },
        ruleValidate: {
          sort: [
            {type: 'number', required: true, message: '排序值不能为空', trigger: 'blur'}
          ],
          title: [
            {required: true, message: '昵称不能为空', trigger: 'blur'}
          ],
          linkUrl: [
            {required: true, message: '跳转链接不能为空', trigger: 'blur'}
          ],
          status: [
            { type: 'number', required: true, message: '请选择状态', trigger: 'change' }
          ],
        },
        add: false,
        saveLoading: false
      }
    },
    methods: {
      save (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.saveLoading = true
            if (this.add) {
              editSlider(this.detail).then(()=> {
                this.$Message.success('新增成功')
                this.saveLoading = false
                this.$router.go(-1)
              },() => {
                this.saveLoading = false
              })
            } else {
              let params = Object.assign({},this.detail,{id:this.$route.query.id})
              editSlider(params).then(()=> {
                this.$Message.success('修改成功')
                this.saveLoading = false
                this.$router.go(-1)
              },() => {
                this.saveLoading = false
              })
            }
          }
        });
      },
      copyLink () {
        let that = this
        let clipboard = new this.clipboard(arguments[0]);
        clipboard.on('success', function () {
          that.$Message.success('复制成功')
        });
        clipboard.on('error', function () {
          that.$Message.fail('复制失败')
        });
      }
    },
    mounted () {
      if (this.$route.query.id) {
        getSliderDetail(this.$route.query.id).then(data => {
          this.detail = data
        })
      } else {
        this.add = true
      }
    }
  }
</script>

<style scoped>
  .cobyOrderSn1 ,.cobyOrderSn2 {
    color: #2d8cf0;
  }

</style>
